import React from 'react';
import {View} from 'react-native';
import {Text, useAppTheme} from 'tsun-smart-ui';

type Source = {
  name: string;
  percentage: number;
  value: string;
  color: string;
};

type Props = {
  sources: Source[];
  className?: string;
};

const EnergySourceBreakdown: React.FC<Props> = ({sources, className}) => {
  const totalPercent = sources.reduce((acc, s) => acc + s.percentage, 0);
  const theme = useAppTheme();
  return (
    <View className={`w-full  bg-white rounded-xl ${className}`}>
      {/* 顶部进度条 */}
      <View className="h-1 rounded-lg overflow-hidden ">
        <View className="absolute top-0 left-0 h-full flex-row w-full">
          {sources.map((source, index) => (
            <View
              key={index}
              className="h-full"
              style={{
                width: `${(source.percentage / totalPercent) * 100}%`,
                backgroundColor: theme.colors?.background?.primary,
              }}></View>
          ))}
        </View>
      </View>

      {/* 内容部分 */}
      <View className="flex-row justify-between text-center mt-2">
        {sources.map((source, index) => (
          <View key={index} className="flex-1">
            <Text variant="caption" style={{color: source.color}}>
              {source.name}
            </Text>
            <Text
              variant="caption"
              className="my-1"
              style={{
                color: theme.colors?.neutral?.secondaryTitle,
              }}>
              {source.percentage.toFixed(2)}%
            </Text>
            <Text>{source.value}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};

export default EnergySourceBreakdown;
